
var req = null;
var blocks = null;

function Blocks(json) {
	this.blocks = json;
}

Blocks.prototype.names = function() {
	var keys = new Array();
	for(var key in this.blocks) {
		keys.push(key);
	}
	keys.sort();
	return keys;
}

Blocks.prototype.titleForHTML = function(html) {
	regexp = new RegExp("\s*\<!\-\-\s*(.*)\s*\-\-\>");
	matches = regexp.exec(html);
	if(matches && matches.length > 1) {
		return matches[1];
	} else {
		return null;
	}
}

Blocks.prototype.stateForBlock = function(name) {
	return 100;
}

Blocks.prototype.renderArea = function(name) {
	var area = this.blocks[name]
	var outputNode = document.createElement("div");
	var titleNode = document.createElement("h1");
	var titleText = document.createTextNode(name);
	titleNode.appendChild(titleText);
	titleNode.setAttribute("class","blocks");
	outputNode.appendChild(titleNode);
	for(var state in area) {
		var title = "State " + state + ": " + this.titleForHTML(area[state]);
		if(title==null) {
			title = "State " + state;
		}
		var areaDiv = document.createElement("div");
		var areaDivText = document.createTextNode(title);
		areaDiv.appendChild(areaDivText);
		areaDiv.setAttribute("class","block");
		areaDiv.setAttribute("id","block-" + name + "-" + state);
		this.renderButton(areaDiv,"Switch","switchBlock(this,'" + name + "'," + state + ")");
		outputNode.appendChild(areaDiv);
	}
	return outputNode;
}

Blocks.prototype.renderBlocks = function(name) {
	names = blocks.names();
	blocksNode = document.createElement("div");
	for(var i = 0; i < names.length; i++) {
		areaNode = blocks.renderArea(names[i]);
		blocksNode.appendChild(areaNode);
	}
	return blocksNode;
}

Blocks.prototype.renderButton = function(parentNode,title,evt) {
	var span = document.createElement("span");	
	var text = document.createTextNode(title);
	span.setAttribute("class","button");
	if(evt) {
		var a = document.createElement("a");
		a.setAttribute("onclick",evt);
		a.setAttribute("href","#");
		span.appendChild(a);
		a.appendChild(text);
	} else {
		span.appendChild(text);
	}
	parentNode.appendChild(span);
}

function switchBlock(clickedNode,name,state) {
	if(blocks) {
		req = new Request("GET","/state/" + name + "/" + state);
		req.send(function(r) { alert("Switched state"); });
	}
}

function fetchState() {
	if(req==null) {
		req = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");
	}
	if(req==null) {
		return;
	}
	req.open("GET","/state.js",true)
	req.onreadystatechange = fetchStateStateChange;
	req.send(null);	
}

function fetchBlocks() {
	if(req==null) {
		req = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");
	}
	if(req==null) {
		return;
	}
	req.open("GET","/blocks.js",true)
	req.onreadystatechange = fetchBlocksStateChange;
	req.send(null);
}

function fetchBlocksStateChange() {
	if(req.readyState == 4 && req.status == 200) {
		var json = eval('('+ req.responseText +')');
		if(json) {
			blocks = new Blocks(json);
			blocksDiv = document.getElementById('blocks');
			if(blocksDiv) {
				blocksNode = blocks.renderBlocks();
				blocksDiv.innerHTML = blocksNode.innerHTML;
			}
		}
	}
}

function fetchStateStateChange() {
	if(req.readyState == 4 && req.status == 200) {
		var json = eval('('+ req.responseText +')');
		if(json) {
			// do something with state
		}
	}
}


